<template>
    <div class="map-content">
        <div id="aMap"></div>
        <ul class="tile-type" @click="openOptions" :class="{'active': active}">
            <li class="satellite-tile" v-if="active" @click="changeMap(localType)" :class="{'border': satelliteStatus}">
                <img src="./../assets/images/satellite.svg" alt="卫星地图">
                <span>卫星地图</span>
            </li>
            <li class="street-tile" v-if="active" @click="changeMap(localType, 'street')" :class="{'border': streetStatus}">
                <img src="./../assets/images/street.svg" alt="街道地图">
                <span>街道地图</span>
            </li>
        </ul>
        <div class="area-info">
            <div>
                <span>地址：</span>
                <span>{{address.address}}</span>
            </div>
            <div v-if="type == 3">
                <span>面积：</span>
                <span>{{address.area}} 平方公里</span>
            </div>
            <div v-else-if="type == 5">
                <span>长度：</span>
                <span>{{address.area}} 公里</span>
            </div>
            <div v-else-if="type == 4">
                <span>点数：</span>
                <span>{{address.area}} 个</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'ShowMap',
        props: {
            lnglat: String,
            type: Number,
            address: {
                type: Object,
                default: function () {
                    return {
                        address: '无',
                        area: '0',
                    }
                }
            },
        },
        data() {
            return {
                active: false,
                satelliteStatus: true,
                streetStatus: false
            }
        },
        computed: {
            localType() {
                return parseInt(this.type);
            }
        },
        mounted() {
            let type = parseInt(this.type);
            this.changeMap(type)
        },
        methods: {
            openOptions() {
                this.active = true;
            },
            changeMap(type, mapType = 'satellite') {
                let lnglat = JSON.parse(this.lnglat)
                var map = new AMap.Map('aMap', {
                    resizeEnable: true,
                    zoom: 16
                });
                if (type === 1 || type === 2 || type === 3) {
                    let path = [];
                    lnglat.forEach(value => {
                        path.push([value.lng, value.lat])
                    });
                    let polygon = new AMap.Polygon({
                        path: path,
                        isOutline: true,
                        borderWeight: 3,
                        strokeColor: '#FF33FF',
                        strokeWeight: 6,
                        strokeOpacity: 0.2,
                        fillOpacity: 0.4,
                        fillColor: '#1791fc',
                        zIndex: 50,
                    });

                    polygon.setMap(map);
                    // 缩放地图到合适的视野级别
                    map.setFitView([polygon])
                }
                if (type === 4) {
                    lnglat.forEach(value => {
                        var marker = new AMap.Marker({
                            position: new AMap.LngLat(value.lng, value.lat),
                        });
                        map.add(marker);

                        let path = [];
                        lnglat.forEach(value => {
                            path.push([value.lng, value.lat])
                        });
                        let polygon = new AMap.Polygon({
                            path: path,
                            zIndex: 50,
                        });
                        map.setFitView([polygon])
                    })
                }
                if (type === 5) {
                    var path = [];

                    lnglat.forEach(value => {
                         var line = new AMap.LngLat(value.lng, value.lat);
                         path.push(line)
                    });
                    var polyline = new AMap.Polyline({
                        path: path,
                        borderWeight: 2, // 线条宽度，默认为 1
                        strokeColor: 'red', // 线条颜色
                        lineJoin: 'round', // 折线拐点连接处样式
                        strokeStyle: 'dashed'
                    });

                    map.add(polyline);
                    map.setFitView([polyline])
                }
                let satellite = new AMap.TileLayer.Satellite({
                    map: map,
                });
                if (mapType === 'satellite') {
                    satellite.show();
                    this.satelliteStatus = true;
                    this.streetStatus = false;
                } else {
                    satellite.hide();
                    this.satelliteStatus = false;
                    this.streetStatus = true;
                }
            }
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "./../assets/scss/mixin";

    .map-content {
        position: relative;
        width: 800px;
        height: 600px;
        & > #aMap {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        & > .area-info {
            position: absolute;
            width: 100%;
            z-index: 200;
            bottom: 0;
            background: #292C35;
            padding: 10px 20px;
            @include fj(space-between)
        }

        & > .tile-type {
            position: absolute;
            z-index: 2;
            top: 15px;
            right: 15px;
            opacity: 0.8;
            @include wh(44px, 44px);
            background: url(../assets/images/title-types.svg) center no-repeat;
            cursor: pointer;
            list-style: none;
            @include fj(space-around);
            align-items: center;
            &.active {
                background: #000000;
                box-shadow: 0 1px 2px 0 rgba(91,91,91,0.50);
                padding: 16px 8px;
                margin: 0;
                width: 150px;
                height: auto;
                li {
                    @include fj(flex-start);
                    flex-direction: column;
                    align-items: center;
                }
            }
            .satellite-tile, .street-tile {
                &.border {
                    img {
                        border: 1px solid $blue;
                    }
                }
            }
        }
    }
</style>
